<template>
  <view>
    <view class="swiper">
      <view class="swiper-box">
        <rf-swipe-dot
          :info="swiperList"
          mode="nav"
          :current="current"
          field="title"
        >
          <swiper
            @change="handleDotChange"
            autoplay="true"
            previous-margin="10rpx"
			v-if="info.special"
            next-margin="10rpx"
            circular="true"
          >
            <swiper-item v-for="(item, index) in info.special.swiperlist" :key="index">
              <view class="swiper-item">
                <image :src="item" mode="aspectFill" />
              </view>
            </swiper-item>
          </swiper>
        </rf-swipe-dot>
      </view>
    </view>
    <view class="info">
      <view class="info-top">
        <view class="left">
          <view class="title" v-if="info.special">{{info.special.special.title}}</view>
          <view class="label"><text>视频专题</text></view>
        </view>
        <!-- <view class="right"> 收藏 </view> -->
      </view>
      <view class="info-bottom">
        <!-- <view class="pin-money">
          <view class="price">¥<text>8.00</text></view>
          <view class="vip-price">￥6.00</view>
          <image src="@/static/vip.png"></image>
          <view class="total">共2节</view>
        </view> -->
        <view class="collect" v-if="info.special">已有{{info.special.special.pink_number}}人学习</view>
      </view>
    </view>
    <view class="cont-wrap">
      <view class="cont-tabs">
        <view :class="tabIndex==1?'active':''" @click="tabIndex=1">
          课程详情
        </view>
        <view :class="tabIndex==2?'active':''" @click="tabIndex=2">
          课程目录
        </view>
      </view>
      <view class="cont-pannel">
        <view v-show="tabIndex==1" class="content" v-if="info.special">
          <rich-text :nodes="info.special.special.content"></rich-text>
        </view>
        <view  v-show="tabIndex==2">
          <navigator class="list" v-for="(item,index) in list" :key="index" :url="`/pages/courseDetail/courseDetail?id=${item.id}&special_id=${id}`">
            <image src="@/static/media3.png"></image>
            <text class="num">{{item.sort}}</text>
            |
            <text class="title">{{item.title}}</text>
            <text class="free">{{item.is_free==1?'免费':'付费'}}</text>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
	import {
		courseDetail,
	getCourseList
	} from '@/api/product';
import rfSwipeDot from '@/components/rf-swipe-dot';
export default {
  components: { rfSwipeDot },
  data() {
    return {
      current: 0,
      swiperList: [
        {
          cover: require('@/static/logo.png'),
        },
      ],
      tabIndex:1,
      id:0,
      info:{},
      list:[]
    };
  },
  onLoad(options){
    console.log(options)
    this.id = options.id
    this.getCourseList()
    this.getDetail()
  },
  methods: {
			async getCourseList() {
				const res = await this.$http
					.post(`${getCourseList}`, {
						special_id:Number(this.id),
            source_id:0
          },{
            header: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
          })
          this.list = res.data.list
			},
    async getDetail() {
				const res = await this.$http
					.get(`${courseDetail}`, {
						id:this.id
					})
          this.info= res.data
			},
    handleDotChange(e) {
      this.current = e.detail.current;
    },
  },
};
</script>
<style lang="scss" scoped>
.top-nav {
  display: flex;
  align-items: center;
  background: $color-white;
  padding: 0 $spacing-base;
  height: 140rpx;
  background-color: $color-white;
  .left {
    margin-right: $spacing-base;
    display: flex;
    align-items: center;
    image {
      width: 70rpx;
      height: 70rpx;
    }
  }
  .logo-text {
    flex: 1;
    color: $base-color;
    view {
      font-weight: bold;
    }
  }
  .right {
    background: $base-color;
    color: $color-white;
    border-radius: $border-radius-lg;
    width: 120rpx;
    line-height: 60rpx;
    text-align: center;
  }
}
/*轮播图*/
.swiper {
  width: 100%;
  padding-bottom: 20upx;
  display: flex;
  justify-content: center;
  background: $color-white;
  .swiper-box {
    width: 100%;
    height: 40vw;
    overflow: hidden;
    border-radius: 15upx;
    box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
    //兼容ios，微信小程序
    position: relative;
    z-index: 1;
    swiper {
      width: 100%;
      height: 40vw;
      swiper-item {
        image {
          width: 100%;
          height: 40vw;
        }
      }
    }
  }
}
.info {
    background: $color-white;
    padding: $spacing-base;
  .info-top {
    display: flex;
    justify-content: space-between;
    margin:$spacing-sm $spacing-base;
    .title {
      font-size: $font-lg;
      
    }
    .label {
      text {
        background: rgba(44, 142, 255, 0.06);
        color: $font-color-spec;
        padding: 0 $spacing-base;
        border-radius: $border-radius-base;
      }
    }
  }
  .info-bottom{
    display:flex;
    justify-content: space-between;
      align-items: center;
      margin:0 $spacing-base;
    view.pin-money{
      display:flex;
      align-items: center;
      view{
        font-size: 30upx;
        margin-right:$spacing-sm;
        text{
          font-size: 40upx;
        }
      }
      .price{
        color:#ff4a4a
      }
      image{
        width:40upx;
        height:20upx;
      }
    }
    .total{
      color: #999;
      margin-left: $spacing-sm;
    }
    .collect{
      color: #999;
    }
  }
}
.cont-wrap{
  background: $color-white;
  padding:$spacing-base;
  margin-top: $spacing-base;
  .cont-tabs{
    display: flex;
    
    view{
      flex:1;
      text-align: center;
      line-height: 60upx;
      font-size: $font-lg;
      &.active{
        position: relative;
        color: $base-color;
        &::after{
          position: absolute;
          content: '';
          border-bottom: 1upx solid $base-color;
          bottom:0;
          width:30%;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }
  .cont-pannel{
    padding-top:20upx;
    .content{
      margin:20upx 0 20upx 0;
    }
    .list{
      display: flex;
      align-items: center;
      padding: $spacing-base;
      image{
        width:28upx;
        height:28upx;
      }
      text{
        margin: 0 $spacing-sm;
      }
      .title{
        flex:1;
      }
      .free{
        padding:0 $spacing-base;
        color: #feb720;
        background-color: rgba(254, 183, 32, .1);
        border-radius: $border-radius-lg;
      }
    }
  }
}
</style>